<template>
  <!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'  -->
  <a-layout-header
    v-if="!headerBarFixed"
    :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
    :style="{ padding: '0' }"
  >
    <div
      v-if="mode === 'tongyong'"
      class="header"
    >
      <a-icon
        v-if="device==='mobile'"
        class="trigger"
        :type="collapsed ? 'menu-fold' : 'menu-unfold'"
        @click.native="toggle"
      ></a-icon>
      <a-icon
        v-else
        class="trigger"
        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
        @click.native="toggle"
      />
      <span class="tongyong-logo" v-if="device!=='mobile'">
        <router-link :to="{name:'dashboard'}">
          <img
            src="~@/assets/logo.svg"
            alt="logo"
          >
          <h1>内蒙古教育厅民办教育机构管理系统</h1>
        </router-link>
      </span>
      <user-menu></user-menu>
    </div>



    <div
      v-else-if="mode === 'sidemenu'"
      class="header"
    >
      <a-icon
        v-if="device==='mobile'"
        class="trigger"
        :type="collapsed ? 'menu-fold' : 'menu-unfold'"
        @click.native="toggle"
      ></a-icon>
      <a-icon
        v-else
        class="trigger"
        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
        @click.native="toggle"
      />

      <user-menu></user-menu>
    </div>
    <div
      v-else
      :class="['top-nav-header-index', theme]"
    >
      <div class="header-index-wide">
        <div class="header-index-left">
          <logo
            class="top-nav-header"
            :show-title="device !== 'mobile'"
          />
          <s-menu
            v-if="device !== 'mobile'"
            mode="horizontal"
            :menu="menus"
            :theme="theme"
          ></s-menu>
          <a-icon
            v-else
            class="trigger"
            :type="collapsed ? 'menu-fold' : 'menu-unfold'"
            @click.native="toggle"
          ></a-icon>
        </div>
        <user-menu class="header-index-right"></user-menu>
      </div>
    </div>

  </a-layout-header>
</template>

<script>
import UserMenu from "../tools/UserMenu";
import SMenu from "../menu/";
import Logo from "../tools/Logo";

import { mixin } from "@/utils/mixin.js";

export default {
  name: "GlobalHeader",
  components: {
    UserMenu,
    SMenu,
    Logo
  },
  mixins: [mixin],
  props: {
    mode: {
      type: String,
      // sidemenu, topmenu,tongyong
      default: "sidemenu"
    },
    menus: {
      type: Array,
      required: true
    },
    theme: {
      type: String,
      required: false,
      default: "dark"
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    device: {
      type: String,
      required: false,
      default: "desktop"
    }
  },
  data() {
    return {
      headerBarFixed: false
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      if (this.autoHideHeader) {
        let scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        if (scrollTop > 100) {
          this.headerBarFixed = true;
        } else {
          this.headerBarFixed = false;
        }
      } else {
        this.headerBarFixed = false;
      }
    },
    toggle() {
      this.$emit("toggle");
    }
  }
};
</script>

<style lang="scss" scoped>
.tongyong-logo {
  img {
    height: 40px;
    line-height: 64px;
    padding: 0 12px;
    display: inline-block;
    vertical-align: middle;
    transition: color 0.3s;
    margin-top: -10px;
  }
  h1 {
    display: inline;
    font-weight: 300;
  }
}
</style>